<template>
  <scroll-view
    scroll-y
    @scrolltolower="handlescrolltolower"
    class="recommend-container"
    v-if="recommends.length"
  >
    <!-- 推荐开始 -->
    <view class="recommend-wrap">
      <block v-for="item in recommends" :key="item.id">
        <navigator class="recommend-item" :url="`/pages/album/index?id=${item.target}`">
          <image :src="item.thumb" mode="widthFix" />
        </navigator>
      </block>
    </view>
    <!-- 推荐结束 -->

    <!-- 月份开始 -->
    <view class="month-wrap">
      <view class="month-title">
        <view class="month-title-info">
          <view class="month-info">
            <text>{{monthes.MM}} /</text>
            {{monthes.DD}}月
          </view>
          <view class="month-text">{{monthes.title}}</view>
        </view>
        <view class="month-title-more">更多></view>
      </view>
      <view class="month-content">
        <block v-for="(item,index) in monthes.items" :key="item.id">
          <view class="month-item">
            <go-detail :list='monthes.items' :index='index'>

            <image :src="item.thumb+item.rule.replace('$<Height>', 360)" mode="aspectFill" />
            </go-detail>

          </view>
        </block>
      </view>
    </view>

    <!-- 热门开始 -->
    <view class="hot-wrap">
      <view class="hot-title">
        <text class="text">热门</text>
      </view>
      <view class="hot-content">
        <block v-for="(item,index) in hots" :key="item.id">
          <view class="hot-item">
            <go-detail :list='hots' :index='index'>
              <image :src="item.thumb" model="widthFix" />
            </go-detail>
          </view>
        </block>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import { getRecommendList } from "../../../network/home.js";
import  goDetail  from "@/components/goDetail.vue";
import moment from "moment";
export default {
  components: {
    goDetail
  },
  mounted() {
    this.__getRecommendList();
  },
  data() {
    return {
      params: {
        //	获取多少条数据
        limit: 30,
        //	关键字 “hot”
        order: "hot",
        //	跳过多少条
        skip: 0
      },
      recommends: [],
      monthes: {},
      hots: []
    };
  },
  methods: {
    // ==================== 网络请求 ============================
    async __getRecommendList() {
      const res = await getRecommendList({
        data: this.params
      });
      if (this.recommends.length === 0) {
        this.recommends = res.res.homepage[1].items;
        this.monthes = res.res.homepage[2];
        this.monthes.MM = moment(this.monthes.stime).format("MM");
        this.monthes.DD = moment(this.monthes.stime).format("DD");
      }
      this.hots = [...this.hots, ...res.res.vertical];
    },
    // ==================== 事件监听 ============================
    handlescrolltolower() {
      this.params.skip += 30;
      this.__getRecommendList();
    }
  }
};
</script>

<style scoped lang='scss'>
.recommend-container {
  height: calc(100vh - 36px);
}
.recommend-wrap {
  display: flex;
  flex-wrap: wrap;
  .recommend-item {
    width: 50%;
    border: 5rpx solid #fff;
  }
}

.month-wrap {
  .month-title {
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
    .month-title-info {
      color: $themeColor;
      font-size: 30rpx;
      font-weight: 700;
      display: flex;
      .month-info {
        text {
          font-size: 36rpx;
        }
      }
      .month-text {
        font-size: 34rpx;
        color: #666666;
        margin-left: 20rpx;
      }
    }
    .month-title-more {
      font-size: 28rpx;
      color: $themeColor;
    }
  }
  .month-content {
    display: flex;
    flex-wrap: wrap;
    view.month-item {
      width: 33.33%;
      padding: 5rpx;
    }
  }
}

.hot-wrap {
  .hot-title {
    padding: 20rpx;
    .text {
      border-left: 5rpx solid $themeColor;
      font-size: 24rpx;
      font-weight: 700;
    }
  }

  .hot-content {
    display: flex;
    flex-wrap: wrap;
    .hot-item {
      width: 33.33%;
      padding: 5rpx;
      image {
      }
    }
  }
}
</style>